<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Packager</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    <link rel="stylesheet" type="text/css" href="static/themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="static/themes/icon.css">
    <script type="text/javascript" src="static/jquery.min.js"></script>
    <script type="text/javascript" src="static/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">


    </script>
</head>
<body class="easyui-layout">
<div data-options="region:'north'" style="height:50px;padding:8px;">
    <a href="#" class="easyui-linkbutton" onclick="javascript:connServer(this);">连接服务器</a>
</div>
<div data-options="region:'west'" style="width:400px">
    <table id="task-grid"
           data-options="fitColumns:true,singleSelect:true,fit:true,border:false,onSelect:onTaskSelect,onLoadSuccess:function(){$('.easyui-button').linkbutton({plain:true});},toolbar:'#task-grid-tb'">
        <thead>
          <tr>
              <th data-options="field:'name',width:60">任务名称</th>
              <th data-options="field:'id', width:40, formatter:taskHandle">操作</th>
          </tr>
        </thead>
    </table>
    <div id="task-grid-tb">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'"
           onclick="javascript:createTask();">新增任务</a>
    </div>
    <div id="task-create" class="easyui-dialog" data-options="closed:true">
        <div class="ftitle">任务信息</div>
        <form id="fm" method="post" novalidate>
            <div class="fitem">
                <label>任务名称:</label>
                <input name="name" class="easyui-textbox" required="true" value="">
            </div>
            <div class="fitem">
                <label>任务类型:</label>
                <select id="type" name="type" class="easyui-combobox" style="width:200px;">
                    <option value="local">本地执行命令</option>
                    <option value="file">文件同步</option>
                    <option value="remote">远程执行命令</option>
                </select>
            </div>
        </form>
    </div>
</div>
<div data-options="region:'center'" style="background:#fff;">
    <div id="file-conf" class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',border:false" style='height:158px;padding:2px;'>
            <div class="ftitle">任务配置</div>
            <form id="fm2" method="post" novalidate>
                <div class="fitem">
                    <label> 本地目录:</label>
                    <input name="local" class="easyui-textbox" style="width:80%" required="true" value="~/Desktop/Work/Project/xoa/xoa/xoa-web/target">
                </div>
                <div class="fitem">
                    <label> 远程目录:</label>
                    <input name="remote" class="easyui-textbox" style="width:80%" required="true" value="/usr/local/tomcat">
                </div>
                <div class="fitem">
                    <label> 文件时间:</label>
                    <input name="fileTime" class="easyui-datetimebox">
                    
                </div>
                <div class="fitem">
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'"
                        onclick="javascript:saveTaskCfg();">保存任务</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
                        onclick="javascript:scanFiles();">扫描文件</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
                        onclick="javascript:uploadFiles();">上传文件</a>
                </div>
            </form>

        </div>
        <div data-options="region:'center'">
            <table id="files-grid" class='easyui-datagrid'
                   data-options="fitColumns:true,singleSelect:true,fit:true,border:false">
                <thead>
                <tr>
                    <th data-options="field:'name',width:120">文件名称</th>
                    <th data-options="field:'status', width:40, formatter: fileSatues">状态</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

</div>
<script type="text/javascript">
    //获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }
    var serverId = getUrlParam("id");
    var server = parent.servers.getServer(serverId);
    var taskIndex = 0;
    $(function () {
        $('#task-grid').datagrid({data: server.tasks});
        $('#task-grid').datagrid('selectRow', 0);
    });

    function connServer(dom) {
        console.info(server);
        if (server.connected) {
            server.disconn();
            $(dom).linkbutton({
                text: '连接服务器'
            });
        } else {
            $(dom).linkbutton({
                text: '连接中...',
                disabled: true
            });
            server.conn(function () {
                $(dom).linkbutton({
                    text: '断开连接',
                    disabled: false
                });
            });
        }
    }
    function taskHandle(val , row){
        return '<a href="#" class="easyui-button" data-options="iconCls:\'icon-cancel\'" onclick="javascript:delTask(\''+row.name+'\');">删除</a>';
    }
    function delTask(name){
        for (var i = 0; i < server.tasks.length; ) {
            var task = server.tasks[i];
            if(task.name == name){
              server.tasks.splice(i,1);
            }else{
              i++;
            }
        };
        loadTasks();
    }
    function loadTasks() {
        $('#task-grid').datagrid({data: server.tasks});
    }

    function onTaskSelect(index, row){
        taskIndex = index;
        $('#fm2').form('clear');
        $('#fm2').form('load', server.tasks[index]);
    }
    function createTask() {
        $('#task-create').dialog({
            title: "创建链接",
            width: 400,
            height: 280,
            modal: true,
            closed: false,
            buttons: [{
                text: '保存',
                handler: saveTask
            }, {
                text: '取消',
                handler: function () {
                    $('#task-create').dialog('close');
                }
            }]
        });
        $('#task-create').dialog('center');
    }
    function saveTask() {
        var s = {};
        $("#task-create").find('input').each(function () {
            if ($(this).attr('name')) {
                s[$(this).attr('name')] = $(this).val();
            }
        });
        server.addTask(s);
        loadTasks();
        $('#task-grid').datagrid('selectRow', server.tasks.length-1);
        $('#task-create').dialog('close');
    }
    function saveTaskCfg(){
        var s = {};
        $("#fm2").find('input').each(function () {
            if ($(this).attr('name')) {
                s[$(this).attr('name')] = $(this).val();
            }
        });
        $.extend(server.tasks[taskIndex], s);
        parent.servers.persist();
    }

    function fileSatues(val, row){
      var msg;
      if(val == 0){
          msg = '待上传';
      }else if(val  ==1){
          msg = '<span style="color:green;">上传中...</span>';
      }else if(val == 2){
          msg = '<span style="color:red;">上传成功</span>';
      }
      return msg;
    }
    function scanFiles(){
        $('#files-grid').datagrid({data: []});
        var task = server.tasks[taskIndex];
        var files = parent.file.scanFiles(task.local, task.fileTime);
        var fileList = [];
        for (var i = 0; i < files.length; i++) {
          fileList.push({name:files[i].replace(task.local, ''), status: 0 });
        };
        $('#files-grid').datagrid({data: fileList});
    }

    function uploadFiles(){
        var task = server.tasks[taskIndex];
        var files = $('#files-grid').datagrid('getData').rows;
        this.index = 0;
        var that = this;
        upload();
        function upload(){
          if(files.length>0 && that.index < files.length){
            files[that.index].status = 1;
            $('#files-grid').datagrid('refreshRow', that.index);
            server.uploadFile(task.local, files[that.index].name, task.remote, function(err){
                if(err){
                  console.log(err);
                }else{
                  files[that.index].status = 2;
                  $('#files-grid').datagrid('refreshRow', that.index);
                  that.index++;
                  upload();
                }
             });
          }
        }

    }
</script>
</body>
</html>